<template>
  <v-card color="background" elevation="0" class="pb-2">
    <v-divider class="ma-2" />
    <div class="video-list-vertical">
      <div
          v-for="(video, index) in videoList"
          :key="index"
          class="video-list-item"
      >
        <VideoCard @click="playVideo(video)" :video-info="video" />
      </div>
      <div v-if="!videoList || videoList.length == 0" class="video-list-item">
        <VCard height="300px" class="ma-4" :variant="'tonal'" style="text-align: center;line-height: 300px;">
          {{ noDataMsg }}
        </VCard>
      </div>
    </div>
    <v-dialog :model-value="videoDialog" fullscreen transition="dialog-bottom-transition">
      <v-card v-if="currentVideo">
        <Video :video-info="currentVideo" :close-video="() => playVideo(null)" />
      </v-card>
    </v-dialog>
  </v-card>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { apiVideoHotRank } from '../../apis/video';
import VideoCard from './card.vue';
import Video from './index.vue';
const { videoList, noDataMsg, showHot } = defineProps({
  videoList: {
    type: Object,
    default: []
  },
  noDataMsg: {
    type: String,
    default: "未找到相关视频"
  },
  showHot: {
    type: Boolean,
    default: false
  }
})
const rankList = ref([])
onMounted(() => {
  if (showHot) {
    apiVideoHotRank().then(({ data }) => {
      rankList.value = data.data.splice(0,10)
    })
  }
})
const currentVideo = ref(null)
const videoDialog = ref(false)
const playVideo = (video) => {
  videoDialog.value = false
  currentVideo.value = video
  videoDialog.value = video ? true : false
}
</script>